今回は、モザイク処理されている画像をクリックすると、その画像が次第に鮮明に表示されるテクニックを紹介します。なかなか面白い演出ができると思うので、写真集のページなどに試してみてください。

まずは、画像をモザイク状に表示させる処理を施します。これは、各画像のスタイルシートに「filter:progid:DXImageTransform.Microsoft.Pixelate(maxSquare=30)」と記述し、モザイクのフィルターを適用すると実現できます。「maxSquare=30」にはモザイクのサイズを2〜50で指定してください（今回は30ピクセル四方のモザイクとしました）。また、onClickイベントを追加し、画像を鮮明にするJavaScript関数「original()」を呼び出します。 ※このフィルターはInternet Explore専用となるため、Netscapeなどでは画像がモザイク処理されず、初めから鮮明に表示されます。 <IMG src="photo01.jpg" style="filter:progid:DXImageTransform.Microsoft.Pixelate(maxSquare=30)" onClick="original(this)">

	続いては、JavaScript関数「original()」を自作します。画像を次第に鮮明に表示させるには、モザイクのサイズを少しずつ小さくしていきます。ここでは、この処理を行う関数「anime(）」をsetIntervalで0.1秒（100/1000秒）おきに呼び出します。なお、初めに設定されている変数「msize」は、モザイクのサイズ変更用として利用します。 <SCRIPT language="JavaScript"> <!-- msize = 30 function original(image){ img = image myInt=setInterval('anime(img)',100); } // --> </SCRIPT>

あとは、JavaScript関数「anime(）」を作成すればテクニックの完成です。ここでは、「msize」が2より大きい場合に、「msize」を1つ小さくし、それを新しいモザイクのサイズとしています。そして「msize」が2以下になると、モザイクのフィルターを無効にし、鮮明な画像を表示させます。その後、clearInterval()で「anime(）」の繰り返しを中断させ、「msize」を元の30に戻しておきます。 <SCRIPT language="JavaScript"> <!-- msize = 30 function original(image){ img = image myInt=setInterval('anime(img)',100); } function anime(imgobj){ if (msize > 2){ msize--; imgobj.filters[0].MaxSquare=msize; } else { clearInterval(myInt); imgobj.filters[0].enabled=false; msize=30; } } // --> </SCRIPT>

�y�V���o�C��[UNLIMIT��������1�~] EC�i�r���|�C���� Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I

�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� �����������O�~�y�������������z �C�O���s�����������I �C�O�z�e��